import * as pixi from "pixi.js";
// override requires so that the local pixi-particles gets the pixi.js
// from this test project, not from the top level
require('override-require')((request:any) => request === 'pixi.js', () =>  pixi);
//import * as particles from "pixi-drawbase";
//import * as aaa from './dist/pixi-drawbase.js';
//const aaa = require('./dist/pixi-drawbase.js')
const ab = require('./../../dist/pixi-drawbase.js')


const DrawBase = ab.PIXI.drawbase;
console.log(ab)
//import './dist/pixi-drawbase.js';

// const imagePaths = ["../../docs/examples/images/Sparks.png"];
// const config = {
// 	"alpha": {
// 		"start": 1,
// 		"end": 0.31
// 	},
// 	"scale": {
// 		"start": 0.5,
// 		"end": 1
// 	},
// 	"color": {
// 		"start": "ffffff",
// 		"end": "9ff3ff"
// 	},
// 	"speed": {
// 		"start": 600,
// 		"end": 200
// 	},
// 	"acceleration": {
// 		"x":0,
// 		"y": 2000
// 	},
// 	"startRotation": {
// 		"min": 260,
// 		"max": 280
// 	},
// 	"rotationSpeed": {
// 		"min": 0,
// 		"max": 0
// 	},
// 	"lifetime": {
// 		"min": 0.25,
// 		"max": 0.5
// 	},
// 	"blendMode": "normal",
// 	"frequency": 0.001,
// 	"emitterLifetime": 0,
// 	"maxParticles": 1000,
// 	"pos": {
// 		"x": 0,
// 		"y": 0
// 	},
// 	"addAtBack": false,
// 	"spawnType": "circle",
// 	"spawnCircle": {
// 		"x": 0,
// 		"y": 0,
// 		"r": 0
// 	}
// };
// const canvas = document.getElementById("stage") as HTMLCanvasElement;
// // Basic PIXI Setup
// const rendererOptions =
// {
// 	width: canvas.width,
// 	height: canvas.height,
// 	view: canvas,
// };
// const stage = new pixi.Container(),
// 	renderer = new pixi.Renderer(rendererOptions);
// let bg:pixi.Sprite = null;

// // Update function every frame
// const update = function(){

// 	// render the stage
// 	renderer.render(stage);
// };

// // Resize the canvas to the size of the window
// window.onresize = function() {
// 	canvas.width = window.innerWidth;
// 	canvas.height = window.innerHeight;
// 	renderer.resize(canvas.width, canvas.height);
// 	if(bg)
// 	{
// 		//bg is a 1px by 1px image
// 		bg.scale.x = canvas.width;
// 		bg.scale.y = canvas.height;
// 	}
// };
// window.onresize(null);

// // Preload the particle images and create PIXI textures from it
// const urls = [];// imagePaths.slice();

// urls.push("../../docs/examples/images/bg.jpg");
// const loader = pixi.Loader.shared;
// for(let i = 0; i < urls.length; ++i)
// 	loader.add("img" + i, urls[i]);
// loader.load(function()
// {
// 	debugger;
// 	bg = new pixi.Sprite(pixi.Texture.from("../../docs/examples/images/bg.jpg"));
// 	console.log("22222")
// 	//bg is a 1px by 1px image
// 	bg.scale.x = canvas.width;
// 	bg.scale.y = canvas.height;
// 	bg.tint = 0x000000;
// 	stage.addChild(bg);

// 	const bunny = pixi.Sprite.from('../../docs/examples/assets/bunny.png');

// 	// center the sprite's anchor point
// 	bunny.anchor.set(0.5);

// 	// move the sprite to the center of the screen
// 	bunny.x = 10;
// 	bunny.y = 20;

// 	stage.addChild(bunny);

// 	update();
// 	console.log("33333333333333")
// });

//let pixi:window.PIXI = window.PIXI;
//console.log(this.PIXI.drawbase);

const app = new pixi.Application({ transparent: true });
document.body.appendChild(app.view);

// create a new Sprite from an image path.
const bunny = pixi.Sprite.from('./bg.jpg');

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;

//app.stage.addChild(bunny);

console.log(DrawBase);

const rectItem = new DrawBase.RectangleItem(200,50,200,100);

// Rectangle
rectItem.beginFill(0xFEEB77);
rectItem.draw();
rectItem.endFill();
app.stage.addChild(rectItem);

console.log(rectItem.x);


const graphics = new PIXI.Graphics();

// Rectangle
graphics.beginFill(0xDE3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();

console.log(graphics.line);
console.log(graphics.fill);
app.stage.addChild(graphics);

app.ticker.add(() => {
    // just for fun, let's rotate mr rabbit a little
   // bunny.rotation += 0.1;
});
